<!DOCTYPE html>
<html>
<head>
    <title>自定义指令</title>  <!-- v-pre跳过vue渲染, 解析为静态内容, 直接展示 -->
     <script src="../js/vue.min.js"></script>  <!-- 用于在页面中引入vue.js,会阻塞页面的渲染, 还可以放在body的最下方, 不会阻塞页面的渲染. 但是js脚本还是会被阻塞 -->
</head>
<body>
    <!-- Your HTML code goes here -->
    <div id="root">
        <h2 >当前n: {{n}}</h2>
        <h2>放大后的值: <span v-big="n"></span></h2>
        <input type="text" v-bind:value="n">
        <input type="text" v-fbind:value="n">  <!-- autoforce -->
        <button @click="n++">+1</button>
    </div>
</body>
<script>
    new Vue({
        el: "#root",
        data: {
            n:0
        },
        directives: {
            // big: function(el, binding) {
            //     el.innerText = binding.value * 2
            // }
            big(el, binding) {
                el.innerText = binding.value * 2
            },
            // fbind(el, binding) {
            //     el.value = binding.value
            //     el.focus() // 自动获取焦点, 不奏效, 因为方法的执行是是在绑定的时候, 而此时input还没有被渲染出来. 所以需要使用钩子函数
            // }
            fbind: { // 自定义指令的钩子函数
                bind(el, binding) { // bind钩子函数, 在绑定的时候执行
                    el.value = binding.value
                },
                update(el, binding) { // update钩子函数, 在更新的时候执行
                    el.value = binding.value
                },
                inserted(el, binding) {
                    el.focus() // 页面渲染完毕后, 自动获取焦点
                }
            }
        }
    })
</script>
</html>
